<template>
  <div>
    <div class="search">
      <van-search label="地址" placeholder="请输入搜索关键词">
        <template #label>
          <div @click="$router.push('/cityList')">上海</div>
        </template>
      </van-search>
    </div>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" class="swipe" />
      </van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="search" text="地图" />
      <van-grid-item icon="wap-home-o" text="出租" to="/publish"/>
    </van-grid>

    <div class="conter">
      <div class="group">
        <h4>租房小组</h4>
        <a href="#">更多</a>
      </div>
      <van-grid direction="horizontal" :column-num="2" :gutter="10">
        <van-grid-item v-for="item in info" :key="item.id">
          <img
            :src="'http://liufusong.top:8080' + item.imgSrc"
            alt=""
            class="picture"
          />
          <div class="des">
            <div>{{ item.desc }}</div>
            <div>{{ item.title }}</div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- <div class="conter">
      <div class="group">
        <h4>租房小组</h4>
        <a href="#">更多</a>
      </div>
      <div class="list">
        <div v-for="item in info" :key="item.id">
          <img :src="'http://liufusong.top:8080' + item.imgSrc" alt="" />
          <div class="text">
            <span>{{ item.title }}</span>
            <span>{{ item.desc }}</span>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  //swiper
  group
} from '@/api/user'
export default {
  setup () {
    const images = [
      'http://liufusong.top:8080/img/swiper/1.png',
      'http://liufusong.top:8080/img/swiper/2.png',
      'http://liufusong.top:8080/img/swiper/3.png'
    ]
    return { images }
  },
  data () {
    return {
      info: []
    }
  },
  async created () {
    // const data = await swiper()
    // console.log(data)
    // this.info = data.body
    const data = await group()
    console.log(data)
    this.info = data.body
  }
}
</script>

<style lang="less" scoped>
.search {
  position: absolute;
  z-index: 999;
  // height: 35px;
  left: 5%;
  top: 4%;
  width: 92%;
}
/deep/.van-search {
  background-color: rgba(0, 0, 0, -1.5);
  margin-right: 50px;
  width: 90%;
}
.swipe {
  width: 100%;
}
.conter {
  background-color: #f5f5f9;
  height: 240px;
}
.group {
  display: flex;
  justify-content: space-between;
}
.group h4 {
  margin-left: 20px;
}
.group a {
  color: #787d82;
  margin-right: 20px;
  font-size: 14px;
  margin-top: 20px;
}
.picture {
  width: 30%;
}
</style>
